<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>课堂</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->

    <!-- CSS
	============================================ -->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../../static/css/vendor/bootstrap.min.css">
    <!-- Fontawesome -->
    <link rel="stylesheet" href="../../../static/css/vendor/font-awesome.css">
    <!-- Fontawesome Star -->
    <link rel="stylesheet" href="../../../static/css/vendor/fontawesome-stars.css">
    <!-- Ion Icon -->
    <link rel="stylesheet" href="../../../static/css/vendor/ion-fonts.css">
    <!-- Slick CSS -->
    <link rel="stylesheet" href="../../../static/css/plugins/slick.css">
    <!-- Animation -->
    <link rel="stylesheet" href="../../../static/css/plugins/animate.css">
    <!-- jQuery Ui -->
    <link rel="stylesheet" href="../../../static/css/plugins/jquery-ui.min.css">
    <!-- Venobox.css -->
    <link rel="stylesheet" href="../../../static/css/plugins/venobox.css">
    <!-- Nice Select -->
    <link rel="stylesheet" href="../../../static/css/plugins/nice-select.css">

    <link rel="stylesheet" href="../../../static/css/layui.css" media="all">

    <link rel="stylesheet" href="../../../static/css/modules/layer/default/layer.css">
    <link href="../../../static/test/ziy/common.css" rel="stylesheet" type="text/css">
    <!-- Vendor & Plugins CSS (Please remove the comment from below vendor.min.css & plugins.min.css for better website load performance and remove css files from the above) -->
    <!--
    <link rel="stylesheet" href="../../../static/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="../../../static/css/plugins/plugins.min.css">
    -->

    <!-- Main Style CSS (Please use minify version for better website load performance) -->
    <link rel="stylesheet" href="../../../static/css/style.css">
    <!--<link rel="stylesheet" href="../../../static/css/style.min.css">-->

</head>

<body class="template-color-1">


    <div class="main-wrapper">

        <!-- Begin Loading Area -->
        <div class="loading">
            <div class="text-center middle">
                <span class="loader">
            <span class="loader-inner"></span>
                </span>
            </div>
        </div>
        <!-- Loading Area End Here -->

        <!-- Begin Umino's Header Main Area -->
        <header class="header-main_area">

            <div class="header-middle_area">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-5 col-sm-5">
                            <div class="header-logo">
                                <a href="index/index.html">
                                    <img src="../../../static/images/menu/logo/1.png" alt="Umino's Header Logo">
                                </a>
                            </div>
                        </div>


                        <div class="col-lg-5 col-sm-5 d-none d-lg-block">

                        </div>

                        <div class="col-lg-2 col-sm-2 d-none d-lg-block">
                            <div class="hm-minicart_area">
                                <ul>
                                    <!--消息-->
                                    <li>
                                        <a href="cart.html">
                                            <div class="minicart-icon">
                                                <i class="icon ion-android-textsms"></i>
                                                <span class="item-count">2</span>
                                            </div>
                                            <div class="minicart-title">
                                                <span class="item_total"></span>
                                            </div>
                                        </a>
                                        <ul class="minicart-body">

                                            <li>
                                                <div class="price_content">
                                                    <div class="cart-subtotals">
                                                        <div class="products subtotal-list">
                                                            <span class="label">【发布了公告】 测试公告2 </span>
                                                            <span class="value">2019/09/06</span>
                                                        </div>
                                                        <div class="shipping subtotal-list">
                                                            <span class="label">【发布了公告】 测试公告</span>
                                                            <span class="value">2019/09/06</span>
                                                        </div>
                                                    </div>
                                                    <div class="minicart-button">
                                                        <a class="umino-btn umino-btn_fullwidth" href="#">查看全部</a>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                    <!--个人中心-->
                                    <li>
                                        <a href="javascrpt:;">
                                            <div class="minicart-icon wishlist-icon">
                                                <i class="icon ion-android-settings"></i>
                                            </div>
                                        </a>
                                        <div class="userinfo hide" style="display: none;">
                                            <ul>
                                                <li>
                                                    <a class="link setting" href="/user/personal"><i class="icon ion-android-person"></i>  个人设置</a>
                                                </li>
                                                <li>
                                                    <a class="link logout" href="/doLogout"><i class="ion-log-out"></i> 退出账户</a>
                                                </li>
                                            </ul>
                                        </div>

                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="header-bottom_area bg--tangerine_yellow">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-9 col-sm-7">
                            <div class="category-menu">
                                <div class="category-heading">
                                    <h2 class="categories-toggle"><span>菜单</span></h2>
                                </div>
                                <div id="cate-toggle" class="category-menu-list">
                                    <ul>
                                       
                                        <li><a href="#">课堂</a></li>
                                        <shiro:hasRole name = "teacher">
                                            <li><a href="">备课区</a></li>
                                        </shiro:hasRole>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </header>
        <!-- Umino's Header Main Area End Here -->

        <!-- Begin Umino's Product Tab Area -->
        <div class="umino-product-tab_area">
            <div class="umino-product-tab_nav">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-11">
                            <div class="product-tab">
                                <ul class="nav product-menu">
                                    <li><a class="active" data-toggle="tab" href="#featured"><span>课堂</span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-1">
                            <shiro:hasRole name = "teacher">
                                <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" id="addClass" onclick="add()">创建课程</button>
                            </shiro:hasRole>
                            <shiro:hasRole name = "student">
                                <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" id="addClass" onclick="join()">添加课程</button>
                            </shiro:hasRole>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="tab-content umino-tab_content">
                            <div id="featured" class="tab-pane active show" role="tabpanel">
                                <div class="umino-product-tab_slider slider-navigation_style-1">
                                    <div class="slide-item" th:each="course:${courses}" th:if="${course != null}">
                                        <div class="single-product">
                                            <div class="product-img">
                                                <a th:href="@{'/course/index/'+${course.id}}" style="cursor:pointer">
                                                    <img class="primary-img" src="../../../static/images/product/medium-size/1-2.jpg" alt="Umino's Product Image">
                                                </a>
                                                <div class="add-actions">
                                                    <ul>
                                                        <li><a id="editCourse" data-toggle="tooltip" data-placement="top" title="编辑" th:courseid="${course.id}" th:onclick="'javascript:edit(\''+${course.id}+'\');'" style="cursor:pointer"><i class="icon ion-ios-compose"></i></a>
                                                        </li>
                                                        <li>
                                                            <shiro:hasRole name="teacher">
                                                                <a href="#" data-toggle="tooltip" data-placement="top" title="删除" th:onclick="'javascript:del(\''+${course.id}+'\');'">
                                                                    <i class="icon ion-ios-trash"></i>
                                                                </a>
                                                            </shiro:hasRole>
                                                            <shiro:hasRole name="student">
                                                                <a href="#" data-toggle="tooltip" data-placement="top" title="删除" th:onclick="'javascript:out(\''+${course.id}+'\');'">
                                                                    <i class="icon ion-ios-trash"></i>
                                                                </a>
                                                            </shiro:hasRole>
                                                        </li>
                                                        <li><a href="compare.html" data-toggle="tooltip" data-placement="top" title="Add To Cart"><i class="fa fa-chart-bar"></i></a>
                                                        </li>
                                                        <li class="quick-view-btn" data-toggle="modal" data-target="#exampleModalCenter"><a href="javascript:void(0)" data-toggle="tooltip" data-placement="top" title="查看"><i class="ion-ios-search"></i></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="product-content">
                                                <div class="product-desc_info">
                                                    <div class="price-box">
                                                        <span class="new-price" th:text="${course.name}">课堂名称</span>
                                                        <!--<span class="old-price" th:text="${user.userName}">任课教师</span>-->
                                                    </div>
                                                    <h6 class="product-name"><span th:text="${course.teacherName}">Aliquet auctor semali</span>
                                                    </h6>
                                                    <div class="rating-box">
                                                        <ul>
                                                            <li><i class="ion-ios-star"></i></li>
                                                            <li><i class="ion-ios-star"></i></li>
                                                            <li><i class="ion-ios-star"></i></li>
                                                            <li class="silver-color"><i class="ion-ios-star-half"></i></li>
                                                            <li class="silver-color"><i class="ion-ios-star-outline"></i></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Umino's Product Tab Area End Here -->

        <!-- Begin Umino's Footer Area -->

        <!-- Umino's Footer Area End Here -->

    </div>

    <!-- JS
============================================ -->

    <!-- jQuery JS -->
    <script src="../../../static/js/vendor/jquery-1.12.4.min.js"></script>
    <!-- Modernizer JS -->
    <script src="../../../static/js/vendor/modernizr-2.8.3.min.js"></script>
    <!-- Popper JS -->
    <script src="../../../static/js/vendor/popper.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="../../../static/js/vendor/bootstrap.min.js"></script>

    <!-- Slick Slider JS -->
    <script src="../../../static/js/plugins/slick.min.js"></script>
    <!-- Countdown JS -->
    <script src="../../../static/js/plugins/countdown.js"></script>
    <!-- Barrating JS -->
    <script src="../../../static/js/plugins/jquery.barrating.min.js"></script>
    <!-- Counterup JS -->
    <script src="../../../static/js/plugins/jquery.counterup.js"></script>
    <!-- Nice Select JS -->
    <script src="../../../static/js/plugins/jquery.nice-select.js"></script>
    <!-- Sticky Sidebar JS -->
    <script src="../../../static/js/plugins/jquery.sticky-sidebar.js"></script>
    <!-- jQuery UI -->
    <script src="../../../static/js/plugins/jquery-ui.min.js"></script>
    <!-- jQuery UI Touch Punch -->
    <script src="../../../static/js/plugins/jquery.ui.touch-punch.min.js"></script>
    <!-- Venobox JS -->
    <script src="../../../static/js/plugins/venobox.min.js"></script>
    <!-- Scroll Top JS -->
    <script src="../../../static/js/plugins/scroll-top.js"></script>
    <!-- Theia Sticky Sidebar JS -->
    <script src="../../../static/js/plugins/theia-sticky-sidebar.min.js"></script>
    <!-- Waypoints JS -->
    <script src="../../../static/js/plugins/waypoints.min.js"></script>
    <!-- ElevateZoom JS -->
    <script src="../../../static/js/plugins/jquery.elevateZoom-3.0.8.min.js"></script>
    <!-- Images loaded JS -->
    <script src="../../../static/js/plugins/imagesloaded.pkgd.min.js"></script>
    <!-- Isotope JS -->
    <script src="../../../static/js/plugins/isotope.pkgd.min.js"></script>
    <!-- Ajax Mail JS -->
    <script src="../../../static/js/ajax-mail.js"></script>

    <script src="../../../static/js/modules/layer.js"></script>

    <!--<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>-->
    <script src="../../../static/js/layui.js"></script>

    <!-- Vendor & Plugins JS (Please remove the comment from below vendor.min.js & plugins.min.js for better website load performance and remove js files from avobe) -->
    <!--
<script src="../../../static/js/vendor/vendor.min.js"></script>
<script src="../../../static/js/plugins/plugins.min.js"></script>
-->

    <!-- Main JS -->
    <script src="../../../static/js/main.js"></script>

    <script src="../../../static/js/appjs/classroom/classroom.js"></script>
    <script>
        $('.ion-android-settings').click(function () {
            if($('.userinfo').css("display")=="block"){
                $('.userinfo').css("display","none");
            }
            else{
                $('.userinfo').css("display","block");
            }
            //$('.userinfo').removeAttr('style');
            //$('.userinfo').attr('test','display: none;');

        });
    </script>
</body>

</html>

